<!-- 表单 》 年份 -->

<template>
  <el-form-item v-bind="formItem">
    <!-- 标签 -->
    <template v-if="hasLabelSlot" #label>
      <slot name="label" :label="formItem.label">{{ formItem.label }}</slot>
    </template>

    <el-date-picker v-model="model" v-bind="commonProps" type="year" @change="emitChange" />
  </el-form-item>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import dayjs from 'dayjs'
import mixForm from '../mixForm'
import FormDate from '../FormDate'

const name = 'FormYear'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name,

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [mixForm],

  /**
   * 属性注册 (抽取以便查阅)
   */
  props: CORE.WEB[name],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 选择器配置
     */
    pickerOptions() {
      const { disabledDate } = this
      return { disabledDate }
    },

    /**
     * 公共属性
     */
    commonProps() {
      const { placeholder, className, size, format, number, center, pickerOptions } = this
      const centerStr = center ? ` ${className}-center` : ''
      return {
        ...this.elProps,
        name: this.prop,
        class: `${className}${centerStr}`,
        disabled: this.isDisabled,
        clearable: !this.noClear,
        placeholder,
        size,
        popperClass: 'CoreWeb-FormYear-popper',
        valueFormat: format || number ? 'yyyy' : 'timestamp',
        pickerOptions,
      }
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    ...FormDate.methods,

    /**
     * 禁用日期
     */
    disabledDate(date) {
      const { history, future } = this
      if (!date) return false
      if (history) return date.getTime() > dayjs().valueOf()
      if (future) return date.getTime() < dayjs().startOf('year').valueOf()
      return false
    },
  },
}
</script>
